<template>
  <div class="option-items-pane">
    <el-radio-group
      v-if="
        selectedWidget.type === 'radio' ||
        (selectedWidget.type === 'select' && !selectedWidget.options.multiple)
      "
      v-model="optionModel.defaultValue"
      @change="emitDefaultValueChange"
    >
      <ul>
        <li v-for="(option, idx) in optionModel.optionItems" :key="option.value">
          <el-radio :label="option.value" :value="option.value">
            <el-input v-model="option.label" size="small" style="width: 100px"></el-input>
            <el-button
              circle
              plain
              size="small"
              type="danger"
              icon="el-icon-minus"
              class="col-delete-button"
              @click="deleteOption(option, idx)"
            ></el-button>
          </el-radio>
        </li>
      </ul>
    </el-radio-group>
    <el-checkbox-group
      v-else-if="
        selectedWidget.type === 'checkbox' ||
        (selectedWidget.type === 'select' && selectedWidget.options.multiple)
      "
      v-model="optionModel.defaultValue"
      @change="emitDefaultValueChange"
    >
      <ul>
        <li v-for="(option, idx) in optionModel.optionItems" :key="option.value">
          <el-checkbox :value="option.value">
            <el-input v-model="option.label" size="small" style="width: 100px"></el-input>
            <el-button
              circle
              plain
              size="small"
              type="danger"
              icon="el-icon-minus"
              class="col-delete-button"
              @click="deleteOption(option, idx)"
            ></el-button>
          </el-checkbox>
        </li>
      </ul>
    </el-checkbox-group>
    <div v-else-if="selectedWidget.type === 'cascader'" class="full-width-input">
      <el-cascader
        v-model="optionModel.defaultValue"
        :options="optionModel.optionItems"
        :placeholder="i18nt('render.hint.selectPlaceholder')"
        @change="emitDefaultValueChange"
      >
      </el-cascader>
    </div>
    <div v-if="selectedWidget.type === 'cascader'">
      <el-button link type="primary" @click="importCascaderOptions">{{
        i18nt('designer.setting.importOptions')
      }}</el-button>
      <el-button link type="primary" @click="resetDefault">{{
        i18nt('designer.setting.resetDefault')
      }}</el-button>
    </div>

    <div
      v-if="
        selectedWidget.type === 'radio' ||
        selectedWidget.type === 'checkbox' ||
        selectedWidget.type === 'select'
      "
    >
      <el-button link type="primary" @click="addOption">
        {{ i18nt('designer.setting.addOption') }}
      </el-button>
      <!-- <el-button link type="primary" @click="importOptions">
        {{ i18nt('designer.setting.importOptions') }}
      </el-button>
      <el-button link type="primary" @click="resetDefault">
        {{ i18nt('designer.setting.resetDefault') }}
      </el-button> -->
    </div>

    <div
      v-if="showImportDialogFlag"
      v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']"
      class=""
    >
      <el-dialog
        v-model="showImportDialogFlag"
        :title="i18nt('designer.setting.importOptions')"
        :show-close="true"
        class="drag-dialog small-padding-dialog"
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
      >
        <el-form-item>
          <el-input v-model="optionLines" type="textarea" rows="10"></el-input>
        </el-form-item>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="large" type="primary" @click="saveOptions">{{
              i18nt('designer.hint.confirm')
            }}</el-button>
            <el-button size="large" @click="showImportDialogFlag = false">{{
              i18nt('designer.hint.cancel')
            }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <div
      v-if="showImportCascaderDialogFlag"
      v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']"
      class=""
    >
      <el-dialog
        v-model="showImportCascaderDialogFlag"
        :title="i18nt('designer.setting.importOptions')"
        :show-close="true"
        class="drag-dialog small-padding-dialog"
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
      >
        <code-editor v-model="cascaderOptions" mode="json" :readonly="false"></code-editor>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="large" type="primary" @click="saveCascaderOptions">{{
              i18nt('designer.hint.confirm')
            }}</el-button>
            <el-button size="large" @click="showImportCascaderDialogFlag = false">{{
              i18nt('designer.hint.cancel')
            }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OptionItemsSetting',
  props: {
    designer: Object,
    selectedWidget: Object
  },
  data() {
    return {
      showImportDialogFlag: false,
      optionLines: '',

      cascaderOptions: '',
      showImportCascaderDialogFlag: false,

      //separator: '||',
      separator: ','
    }
  },
  computed: {
    optionModel() {
      return this.selectedWidget.options
    }
  },
  watch: {
    'selectedWidget.options': {
      deep: true,
      handler(val) {
        //console.log('888888', 'Options change!')
      }
    }
  },
  methods: {
    emitDefaultValueChange() {
      if (!!this.designer && !!this.designer.formWidget) {
        let fieldWidget = this.designer.formWidget.getWidgetRef(this.selectedWidget.id)
        if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
          fieldWidget.refreshDefaultValue()
        }
      }
    },

    deleteOption(option, index) {
      if (this.optionModel.optionItems.length <= 1) {
        this.$message({
          message: '请至少保留一个选项'
        })
        return
      }
      this.optionModel.optionItems.splice(index, 1)
    },

    addOption() {
      let newValue = 1
      while (this.optionModel.optionItems.some((item) => item.value === newValue)) {
        newValue++
      }

      let newLabel = `选项${newValue}`
      this.optionModel.optionItems.push({
        value: newValue,
        label: newLabel
      })
    },

    importOptions() {
      this.optionLines = ''
      if (this.optionModel.optionItems.length > 0) {
        this.optionModel.optionItems.forEach((opt) => {
          if (opt.value === opt.label) {
            this.optionLines += opt.value + '\n'
          } else {
            this.optionLines += opt.value + this.separator + opt.label + '\n'
          }
        })
      }

      this.showImportDialogFlag = true
    },

    saveOptions() {
      let lineArray = this.optionLines.split('\n')
      //console.log('test', lineArray)
      if (lineArray.length > 0) {
        this.optionModel.optionItems = []
        lineArray.forEach((optLine) => {
          if (!!optLine && !!optLine.trim()) {
            if (optLine.indexOf(this.separator) !== -1) {
              this.optionModel.optionItems.push({
                value: optLine.split(this.separator)[0],
                label: optLine.split(this.separator)[1]
              })
            } else {
              this.optionModel.optionItems.push({
                value: optLine,
                label: optLine
              })
            }
          }
        })
      } else {
        this.optionModel.optionItems = []
      }

      this.showImportDialogFlag = false
    },

    resetDefault() {
      if (
        this.selectedWidget.type === 'checkbox' ||
        (this.selectedWidget.type === 'select' && this.selectedWidget.options.multiple)
      ) {
        this.optionModel.value = []
      } else {
        this.optionModel.value = ''
      }

      this.emitDefaultValueChange()
    },

    importCascaderOptions() {
      this.cascaderOptions = JSON.stringify(this.optionModel.optionItems, null, '  ')
      this.showImportCascaderDialogFlag = true
    },

    saveCascaderOptions() {
      try {
        let newOptions = JSON.parse(this.cascaderOptions)
        this.optionModel.optionItems = newOptions
        //TODO: 是否需要重置选项默认值？？

        this.showImportCascaderDialogFlag = false
      } catch (ex) {
        this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + ex.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.option-items-pane {
  width: 100%;

  ul {
    padding-inline-start: 6px;
    padding-left: 6px; /* 重置IE11默认样式 */
  }
}

.small-padding-dialog :deep(.el-dialog__body) {
  padding: 10px 15px;
}

.dialog-footer .el-button {
  width: 100px;
}

.full-width-input {
  width: 100% !important;

  :deep(.el-cascader) {
    width: 100% !important;
  }
}
</style>
